<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t('租赁项目统计台账明细') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('项目名称')" prop="dealName">
        <el-input
          v-model="queryParams.dealName"
          :placeholder="$t('项目名称')"
          clearable
          @keyup.enter.native="queryHandle"
        />
      </el-form-item>
      <el-form-item :label="$t('项目状态')" prop="dealStatus">
        <dictSelect
          v-model="queryParams.dealStatus"
          :clearable="true"
          dictionary="deal_status"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t('搜索') }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('重置') }}</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="dealBaseList" border tooltip-effect="darkTable">
      <el-table-column :label="$t('序号')" type="index" align="center" width="50">
        <template slot-scope="scope">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="dealName" :label="$t('项目名称')" :show-overflow-tooltip="true" min-width="300">
        <template slot-scope="scope">
          <router-link
            target="_blank"
            :to="{path:'/deal/home/dealBaseHome',query:{id:scope.row.id,companyId:scope.row.companyId}}"
            class="link_a"
          >{{ scope.row.dealName }}</router-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('行业大类')" align="center" prop="company.industryFirstLabel" :show-overflow-tooltip="true" min-width="180" />
      <el-table-column :label="$t('行业细分')" align="center" prop="company.industrySecondLabel" :show-overflow-tooltip="true" min-width="180" />

      <el-table-column :label="$t('所属区域')" align="center" prop="" min-width="180" :show-overflow-tooltip="true">
        <template v-if="scope.row.company" slot-scope="scope">
          <span v-if="scope.row.company.cityRegisteredLabel && scope.row.company.provinceRegisteredLabel">{{ scope.row.company.provinceRegisteredLabel + '-' + scope.row.company.cityRegisteredLabel }}</span>
          <span v-else-if="scope.row.company.provinceRegisteredLabel">{{ scope.row.company.provinceRegisteredLabel }}}</span>
          <span v-else />
        </template>
      </el-table-column>
      <el-table-column :label="$t('地区')" align="center" prop="company.detailsRegistered" min-width="280" :show-overflow-tooltip="true" />
      <el-table-column :label="$t('企业性质')" align="center" prop="enterpriseNature" min-width="180" :formatter="enterpriseNatureFormat" />
      <el-table-column :label="$t('交易模式')" align="center" prop="transactionMode" min-width="180" :formatter="transactionModeFormat" />
      <el-table-column :label="$t('客户联系人')" align="center" prop="customerContact" min-width="180" />
      <el-table-column :label="$t('客户来源')" align="center" prop="customerSource" min-width="180" :formatter="customerSourceFormat" />
      <el-table-column :label="$t('责任部门')" align="center" prop="department" min-width="180" />
      <el-table-column :label="$t('预计金额') + $t('金额单位')" align="center" prop="amountInvestmentEstimate" min-width="180" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ moneyFormat(scope.row.amountInvestmentEstimate, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('创建人')" align="center" prop="dealScruple" min-width="180" />
      <el-table-column :label="$t('创建时间')" align="center" prop="createTime" min-width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
  import { findByStatisticalParameter } from '@/api/base/deal/dealBase'
  export default {
    data() {
      return {
        dateRange: [],
        enterpriseNatureOptions: [],
        transactionModeOptions: [],
        customerSourceOptions: [],
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,
        // 租赁项目表格数据
        dealBaseList: {
          company: []
        },
        // 是否显示弹出层
        formOpen: false,
        // 查询参数
        queryParams: {
          dealStatus: undefined,
          dealName: undefined,
          // 应为融资租赁类型
          dealType: 'lease',
          pageNum: 1,
          pageSize: 10
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {}
      }
    },
    created() {
      this.getList()
      this.getDicts('deal_lease_enterprise_nature').then(response => {
        this.enterpriseNatureOptions = response.data
      })
      this.getDicts('deal_lease_transaction_mode').then(response => {
        this.transactionModeOptions = response.data
      })
      this.getDicts('deal_lease_customer_source').then(response => {
        this.customerSourceOptions = response.data
      })
    },
    methods: {
      /** 查询租赁项目-租金计划列表 */
      getList() {
        this.loading = true
        findByStatisticalParameter(this.queryParams).then(response => {
          this.dealBaseList = response.rows
          this.total = response.total
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      },
      // 企业性质
      enterpriseNatureFormat(row) {
        return this.selectDictLabel(this.enterpriseNatureOptions, row.enterpriseNature)
      },
      // 交易模式
      transactionModeFormat(row) {
        return this.selectDictLabel(this.transactionModeOptions, row.transactionMode)
      },
      // 客户来源
      customerSourceFormat(row) {
        return this.selectDictLabel(this.customerSourceOptions, row.customerSource)
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          dealName: undefined,
          delFlag: undefined,
          createBy: undefined,
          createTime: undefined,
          updateBy: undefined,
          updateTime: undefined
        }
        this.resetForm('form')
      },
      /** 搜索按钮操作 */
      queryHandle() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = []
        this.resetForm('queryForm')
        this.queryHandle()
      }
    }
  }
</script>
